<template>
	<view class="you-box">
		<view class="cont-input">
			<textarea placeholder="请输入你此刻的想法～～" v-model="describ"></textarea>
		</view>
		<view class="img-list">
			<view class="" v-for="(img,index) in imgList" :key="index">
				<image :src="img" class="img" mode="" :webp="imgType(img)"></image>
			</view>
			<view class="bnt" @tap="upLoadImg">
				<image src="../../static/130.png" class="img" mode=""></image>
			</view>
		</view>
		<view class="y-type">
			谁可以看<view class="y-rihgt">
				<!-- <picker @change="bindPickerChange" :value="index" :range="array"> -->
				<view class="uni-input" @tap="setVal">{{array[index].label}}<image src="../../static/arrowL.png" class="img" mode=""></image></view>
				<!-- </picker> -->
			</view>
		</view>
		<view class="y-bnt" @tap="save">
			确认提交
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="p-content">
				<view class="txt" v-for="(item,index) in array" :key="index" @tap="getVal(item,index)">
					{{item.label}}
				</view>
				<view class="txt c" @tap="close()">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {createUserShow} from '@/api/user.js'
	export default {
		components: {
			
		},
		data() {
			return {
				index: 0,
				array: [{
					label:'公开',
					value: 1,
				},{
					label:'隐私',
					value: 2
				}],
				def: {},
				describ: '',
				opentype: '',
				imgList: []
			};
		},
		onLoad(ops) {
			this.def = ops
		},
		methods: {
			imgType(url){
				if(url.indexOf('.webp') >-1) {
					return true
				}else{
					return
				}
			},
			close(){
				this.$refs.popup.close()
			},
			setVal(){
				this.$refs.popup.open('bottom')
			},
			getVal(item,index){
				this.opentype = item.value
				this.index = index
				this.close()
			},
			save(){
				// this.uploadPhoto()
				// createUserShow({describ:this.describ,opentype:this.opentype,orderId:this.def.id,subjectId:this.def.subjectld,pictures:''}).then((res) => {
					
				// })
				if(!this.describ) {
					uni.showToast({title: '请填写内容',icon:"none"});
					return false; 
				}
				if(this.imgList.length <1) {
					uni.showToast({title: '请选择图片',icon:"none"});
					return false; 
				}
				
				createUserShow({firstPagePic:this.imgList[0], describ:this.describ,opentype:this.opentype,orderId:this.def.id,subjectId:this.def.subjectld,orderType:1,showImg:this.imgList.join(',')}).then((res) => {
					uni.showToast({title: '秀成功！',icon:""});
					uni.redirectTo({
						url: '/pagesB/myManicure/list'
					})
				})
			},
			// 图片上传
			upLoadImg(num) {
				let that = this;
				uni.chooseMedia({
					count: 3, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// uploadPhoto(res.tempFiles);
						uni.showLoading({
							title: '图片上传中...'
						})
						res.tempFiles.forEach((ele) => {
							console.log(ele)
							// that.imgList.push(ele.tempFilePath)
							that.uploadPhoto(ele.tempFilePath);
						})
						// that.imgList.push(res.tempFiles[0].tempFilePath)
						console.log(that.imgList)
					}
				});
			},
			uploadPhoto(tempFilePaths) {
				const that = this
				// console.log('tempFilePaths',tempFilePaths,tempFilePaths[0].tempFilePath)
				// console.log(that.imgList)
				let token = uni.getStorageSync('token') || ""
				uni.uploadFile({//nailShow/createUserShow
					url: uni.$baseUrl + '/nailVideo/upload', //开发者服务器 url
					header:{
						// HTTP 请求 Header, header 中不能设置 Referer
						'X-Access-Token': token
					},
					// files: that.imgList,
					filePath: tempFilePaths,//tempFilePaths[0].tempFilePath, // 要上传文件资源的路径
					name: 'pictures', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					formData:{
						dir: 'show'
						// HTTP 请求中其他额外的 form data （即接口需要的其它参数）
						// describ:that.describ,opentype:that.opentype,orderId:that.def.id,subjectId:that.def.subjectld,orderType:1
					},
					success(res) {
						console.log('上传成功', res);
						// uni.showToast({title: '秀成功！',icon:""});
						let data = res.data ? JSON.parse(res.data) : {}
						that.imgList.push(data.result)
					},
					fail(err) {
						console.log('失败', err);
						uni.hideLoading();
					},
					complete() {
						console.log('结束');
						uni.hideLoading();
					},
				})
			}
			
		}
	}
</script>

<style lang="less" scoped>
.you-box{
	padding-top: 34rpx;
	margin: 0 32rpx;
	.cont-input{
		height: 332rpx;
		border-radius: 16rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(228, 73, 91, 0.05);
		textarea{
			padding: 30rpx;
			width: 94%;
		}
	}
	
	.img-list{
		margin-top: 34rpx;
		display: flex;
		.img{
			width: 226rpx;
			height: 226rpx;
			margin-right: 12rpx;
			border-radius: 8rpx;
		}
		.bnt{
			width: 226rpx;
			height: 226rpx;
			border: 2rpx dashed #d9dada;;
		}
	}
	
	.y-type{
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #666;
		margin-top: 160rpx;
		.y-rihgt{
			color: #333;
			float: right;
			.img{
				width: 48rpx;
				height: 48rpx;
				vertical-align: middle;
			}
		}
	}
	.y-bnt{
		background: #E4919D;
		height: 98rpx;
		border-radius: 50rpx;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		line-height: 98rpx;
		margin-top: 62rpx;
	}
}
</style>
